<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>

<html>
<head><title>人員新增維護畫面</title></head>

<script type="text/javascript">

var cdata ={};

	$(document).ready(function() {
		  //for table row
		  $("tr:even").css("background-color", "#F4F4F8");
		  $("tr:odd").css("background-color", "#EFF1F1");
		  $('input.names').change(function() {
			  var names = $(this).val();
			  if(names.length>0){
				  queryPeopleByName(names);
			  }
		  });
			$( "#dialog-form" ).dialog({
				autoOpen: false,
				height: 300,
				width: 860,
				modal: true,
				buttons: {
					"修改現有人員": function() {
						var item_id = $("input.radio_item_id:checked").val();
					    if(typeof(item_id) !== 'undefined' && item_id != null) {
					    	var n = cdata[item_id];
							$("input.names").val(n.names);
							$("input.item_id").val(n.item_id);
							$("input.title").val(n.title);
							$("select.gender").val(n.gender);
							$("input.birthday").val(n.birthday_str);
							$("select.education").val(n.education);
							$("select.job_now").val(n.job_now);
							$("input.email").val(n.email);
							$("input.email2").val(n.email2);
							$("input.office_phone").val(n.office_phone);
							$("input.home_phone").val(n.home_phone);
							$("input.cell_phone").val(n.cell_phone);
							$("input.address").val(n.address);
							$("input.others").val(n.others);
							$("input.notes").val(n.notes);
							
							
							$( this ).dialog( "close" );
					    }else{
					    	alert("請勾選要修改的人員");	
					    
					    }
						
						
					},
					"新增人員": function() {
						$( this ).dialog( "close" );
					}
				},
				close: function() {
					//TODO
				}
			});

	 });

	function queryPeopleByName(names){
		$.ajax({
		      url: '../PersonServiceAction/queryPeopleByName.do',
		      type: 'POST',
		      data: {names: names},
	          cache: false,
	          async: false,
		      error: function(xhr) {
		        alert('Ajax request 發生錯誤');
		      },
		      success: function(data) {
		    	  if(data.list.length>0){
		    		  var str ='<table border="0" style="word-break:break-all"><tr><td>&nbsp;</td><td>姓名</td><td>編號</td><td>性別</td><td>出生日</td><td>E-mail</td<td>行動電話</td><td>地址</td></tr>';
		    		 	 $.each(data.list, function(key, n) {
		    		 		str+='<tr><td><input type="radio" class="radio_item_id" name="item_id" value="'+n.item_id+'" /></td>';
		    		 		str+='<td>'+n.names+'</td><td>'+n.item_id+'</td><td>'+n.gender+'</td><td>'+n.birthday_str+'</td>';
		    		 		str+='<td>'+n.email+'</td><td>'+n.cell_phone+'</td><td>'+n.address+'</td></tr>';
		    		 		cdata[n.item_id]=n;
		    			})
		    	          str+='</table>'
		    	          
		    	          $('div.diaPeople').html(str);

		    		      $("#dialog-form").dialog("open"); 
		    	  }else{
		    		  alert("新增");
		    	  }
		    	  
		      }
		    });

	}

</script>
<body>
<div align="center">
    <h3>人員新增維護畫面</h3>
    
    <table border="0">
    	<tr>
			<td>
			姓名:<input type="text" class="names" size="10">&nbsp;&nbsp;&nbsp;
			</td>
			<td>
			編號:<input type="text" class="item_id" size="5">&nbsp;&nbsp;&nbsp;
			</td>
			<td>
			職務:<input type="text" class="title" size="10">&nbsp;&nbsp;&nbsp;
			</td>
			<td>
			性別:<select class="gender"><option value="">請選擇</option><option value="女">女</option><option value="男">男</option></select>&nbsp;&nbsp;&nbsp;
			</td>
			<td>
			出生日:<input type="text" class="birthday" size="10">&nbsp;&nbsp;&nbsp;
			</td>
			<td>
			教育程度:<select class="education">
					<option value="">請選擇</option>
					<option value="博士">博士</option>
					<option value="碩士">碩士</option>
					<option value="專科/大學">專科/大學</option>
					<option value="高中/高職">高中/高職</option>
					<option value="國中">國中</option>
					<option value="國小">國小</option>
					</select>&nbsp;&nbsp;&nbsp;
			</td>
			<td>
			現職:<select class="job_now">
					<option>請選擇</option>
					<option>博士</option>
					<option value="碩士">碩士</option>
					<option value="專科/大學">專科/大學</option>
					<option value="高中/高職">高中/高職</option>
					<option value="國中">國中</option>
					<option value="國小">國小</option>
					</select>&nbsp;&nbsp;&nbsp;
			</td>    	
    	</tr>
    	<tr>
    		<td>
    		E-mail:<input type="text" class="email" size="20">&nbsp;&nbsp;&nbsp;
    		</td>
    		<td>
    		E-mail2:<input type="text" class="email2" size="20">&nbsp;&nbsp;&nbsp;
    		</td>
    		<td>
    		公司電話:<input type="text" class="office_phone" size="16">&nbsp;&nbsp;&nbsp;
    		</td>
    		<td>
    		住家電話:<input type="text" class="home_phone" size="16">&nbsp;&nbsp;&nbsp;
    		</td>
    		<td>
    		行動電話:<input type="text" class="cell_phone" size="16">&nbsp;&nbsp;&nbsp;
    		</td>
    		<td colspan="2">
    		地址:<input type="text" class="address" size="36">&nbsp;&nbsp;&nbsp;
    		</td>
    	</tr>
    	<tr>
    		<td colspan="7">
    		其他:<input type="text" class="others" size="150">&nbsp;&nbsp;&nbsp;
    		</td>
    	</tr>
    	<tr>
    		<td colspan="7">
    		備註:<input type="text" class="notes" size="150">&nbsp;&nbsp;&nbsp;
    		</td>
    	</tr>
    </table>
    
    

<div id="dialog-form" title="新增或更新人員資料" bgcolor="lightgray">
	<div class="diaPeople" ></div>

</div>
    
    <s:actionmessage/>
    <s:property value="exception"/>

    <h3>訊息內容</h3>
    <pre>
        <s:property value="exceptionStack"/>
   </pre>
</div>
    <s:debug></s:debug>
    
</body>
</html>